<template>
  <view class="bg-gray-50 w-[750rpx] pb-[150rpx] box-border">
    <!-- 顶部导航 -->
     <PageHeader title="UI/UX设计大师班" :showBack="true" />
    <!-- <view
      class="bg-gradient-to-r from-purple-600 to-blue-500 text-white p-[30rpx] sticky top-0 z-100 flex justify-between items-center shadow-lg"
    >
      <IconFont
        name="left"
        class="text-[40rpx] cursor-pointer"
        @click="handleBack"
        color="#000"
      />
      <text class="text-[36rpx] font-bold flex-1 text-center"
        >UI/UX设计大师班</text
      >
      <IconFont
        name="share-alt"
        class="text-[36rpx] cursor-pointer"
        @click="handleShare"
      />
    </view> -->

    <!-- 课程封面 -->
    <view
      class="h-[400rpx] bg-gradient-to-b mt-[-30rpx] from-black/30 to-black/50 flex flex-col justify-end p-[40rpx] text-white relative"
    >
      <image
        src="https://images.unsplash.com/photo-1497636577773-f1231844b336?ixlib=rb-4.0.3&auto=format&fit=crop&w=750&q=80"
        class="absolute inset-0 w-full h-full object-cover"
      />
      <view
        class="absolute inset-0 bg-gradient-to-b from-black/30 to-black/50"
      ></view>

      <view
        class="absolute top-[48rpx] right-[30rpx] bg-orange-500 px-[20rpx] py-[10rpx] rounded-[50rpx] text-[26rpx] font-bold"
      >
        进行中
      </view>

      <view class="relative z-2">
        <text class="text-[48rpx] font-bold mb-[20rpx] block"
          >从零到精通：UI/UX设计实战</text
        >
        <view class="flex items-center text-[26rpx] opacity-90">
          <view class="flex items-center mr-[30rpx]">
            <IconFont name="user-graduate" class="mr-[10rpx]" />
            <text>1285人学习</text>
          </view>
          <view class="flex items-center">
            <IconFont name="star" class="mr-[10rpx]" />
            <text>4.9 (326评价)</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 课程信息卡片 -->
    <view
      class="bg-white rounded-[25rpx] p-[40rpx] m-[30rpx] -mt-[30rpx] relative z-2 shadow-lg"
    >
      <view class="grid grid-cols-3 gap-[30rpx] text-center mb-[30rpx]">
        <view class="flex flex-col">
          <text class="text-[26rpx] text-gray-500 mb-[10rpx]">课程时长</text>
          <text class="text-[36rpx] font-bold text-gray-800">8周</text>
        </view>
        <view class="flex flex-col">
          <text class="text-[26rpx] text-gray-500 mb-[10rpx]">课程进度</text>
          <text class="text-[36rpx] font-bold text-gray-800">65%</text>
        </view>
        <view class="flex flex-col">
          <text class="text-[26rpx] text-gray-500 mb-[10rpx]">签到率</text>
          <text class="text-[36rpx] font-bold text-gray-800">92%</text>
        </view>
      </view>

      <view class="mb-[30rpx]">
        <view
          class="flex justify-between mb-[15rpx] text-[28rpx] text-gray-600"
        >
          <text>学习进度</text>
          <text>13/20课时</text>
        </view>
        <view class="h-[20rpx] bg-gray-200 rounded-[10rpx] overflow-hidden">
          <view
            class="h-full bg-gradient-to-r from-purple-600 to-blue-500 rounded-[10rpx] w-[65%]"
          ></view>
        </view>
      </view>

      <view class="flex flex-wrap gap-[15rpx] mb-[30rpx]">
        <view
          v-for="tag in courseTags"
          :key="tag"
          class="bg-blue-50 text-blue-600 px-[20rpx] py-[10rpx] rounded-[50rpx] text-[26rpx]"
        >
          {{ tag }}
        </view>
      </view>

      <view class="flex items-center pt-[30rpx] border-t border-gray-100">
        <view
          class="w-[100rpx] h-[100rpx] rounded-full overflow-hidden mr-[20rpx]"
        >
          <image
            src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80"
            class="w-full h-full object-cover"
          />
        </view>
        <view class="flex-1">
          <text
            class="text-[32rpx] text-gray-800 font-semibold mb-[10rpx] block"
            >张设计师</text
          >
          <text class="text-[26rpx] text-gray-600"
            >前腾讯高级UI设计师，10年行业经验</text
          >
        </view>
      </view>
    </view>

    <!-- 课表部分 -->
    <view class="bg-white rounded-[25rpx] p-[40rpx] m-[30rpx] shadow-lg">
      <view
        class="text-[36rpx] font-bold text-gray-800 mb-[30rpx] flex items-center"
      >
        <text class="mr-[15rpx]">📅</text>
        <text>课程安排</text>
      </view>

      <view class="flex mb-[30rpx] border-b-2 border-gray-100">
        <view
          v-for="(tab, index) in tabs"
          :key="index"
          class="px-[30rpx] py-[20rpx] text-[30rpx] cursor-pointer relative"
          :class="
            activeTab === index ? 'text-blue-500 font-bold' : 'text-gray-500'
          "
          @click="handleTabChange(index)"
        >
          <text>{{ tab }}</text>
          <view
            v-if="activeTab === index"
            class="absolute bottom-[-2rpx] left-0 right-0 h-[4rpx] bg-blue-500 rounded-[2rpx]"
          ></view>
        </view>
      </view>

      <view class="max-h-[600rpx] overflow-y-auto">
        <view
          v-for="(lesson, index) in lessons"
          :key="index"
          class="bg-white rounded-[20rpx] shadow-md mb-[20rpx] flex items-center p-[24rpx] cursor-pointer transition-all"
          @click="handleLessonClick(lesson)"
        >
          <view class="w-[64rpx] h-[64rpx] rounded-[16rpx] bg-blue-50 flex items-center justify-center text-[28rpx] text-blue-500 mr-[20rpx] flex-shrink-0">
            <IconFont :name="lesson.icon" />
          </view>
          <view class="flex-1 min-w-0">
            <text class="text-[28rpx] font-bold text-gray-800 mb-[8rpx] block line-clamp-2">{{ lesson.title }}</text>
            <view class="flex text-[24rpx] text-gray-600 mb-[4rpx]">
              <view class="flex items-center mr-[16rpx]">
                <IconFont name="clock" class="mr-[6rpx]" />
                <text class="truncate">{{ lesson.time }}</text>
              </view>
              <view class="flex items-center">
                <IconFont name="video" class="mr-[6rpx]" />
                <text class="truncate">{{ lesson.duration }}</text>
              </view>
            </view>
          </view>
          <view
            class="px-[16rpx] py-[8rpx] rounded-[16rpx] text-[24rpx] ml-[12rpx] min-w-[80rpx] max-w-[160rpx] truncate text-center"
            :class="getStatusClass(lesson.status)"
          >
            {{ lesson.status }}
          </view>
        </view>
      </view>
    </view>

    <!-- 签到弹窗 -->
    <view
      v-if="showSignModal"
      class="fixed inset-0 bg-black bg-opacity-70 z-1000 flex items-center justify-center"
      @click="closeSignModal"
    >
      <view
        class="bg-white w-[90%] max-w-[650rpx] rounded-[30rpx] overflow-hidden"
        @click.stop
      >
        <view
          class="bg-gradient-to-r from-purple-600 to-blue-500 text-white p-[30rpx] text-center"
        >
          <text class="text-[36rpx] font-bold mb-[10rpx] block">课程签到</text>
          <text class="text-[28rpx] opacity-90">第5课：交互原型设计实战</text>
        </view>
        <view class="p-[40rpx]">
          <view
            class="flex justify-between mb-[30rpx] p-[20rpx] bg-gray-50 rounded-[20rpx]"
          >
            <view class="text-center">
              <text class="text-[26rpx] text-gray-500 mb-[10rpx] block"
                >签到时间</text
              >
              <text class="text-[32rpx] font-bold text-gray-800"
                >14:00-14:10</text
              >
            </view>
            <view class="text-center">
              <text class="text-[26rpx] text-gray-500 mb-[10rpx] block"
                >当前时间</text
              >
              <text class="text-[32rpx] font-bold text-gray-800">{{
                currentTime
              }}</text>
            </view>
          </view>

          <view
            class="bg-gray-50 rounded-[20rpx] p-[30rpx] mb-[30rpx] text-center"
          >
            <IconFont
              name="map-marker-alt"
              class="text-[60rpx] text-blue-500 mb-[20rpx]"
            />
            <text class="text-[30rpx] text-gray-600 block"
              >南宁市青秀区金湖广场</text
            >
            <text class="text-[26rpx] text-gray-500 mt-[15rpx] block">
              距离签到点：<text class="text-green-500">125米</text>
            </text>
          </view>

          <nut-button
            type="primary"
            size="large"
            class="w-full text-[32rpx] font-bold bg-green-500"
            @click="handleSignIn"
          >
            <IconFont name="check-circle" class="mr-[15rpx]" />
            立即签到
          </nut-button>
        </view>
        <view
          class="absolute top-[20rpx] right-[20rpx] text-white text-[40rpx] cursor-pointer"
          @click="closeSignModal"
        >
          <IconFont name="times" />
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view
      class="fixed bottom-0 left-0 w-[750rpx] box-border bg-white flex p-[25rpx] shadow-lg z-100"
    >
      <nut-button
        type="default"
        size="large"
        class="flex-1 mr-[20rpx] border-blue-500 text-blue-600"
        @click="handleRefund"
      >
        <!-- <IconFont name="bookmark" class="mr-[15rpx]" /> -->
        申请退款
      </nut-button>
      <nut-button
        type="primary"
        size="large"
        class="flex-1 bg-green-500"
        @click="openSignModal"
      >
        <!-- <IconFont name="clipboard-check" class="mr-[15rpx]" /> -->
        课程签到
      </nut-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import Taro from "@tarojs/taro";
import { IconFont } from "@nutui/icons-vue-taro";

// 响应式数据
const activeTab = ref(0);
const showSignModal = ref(false);
const currentTime = ref("");

// 课程标签
const courseTags = ref([
  "设计基础",
  "Figma实战",
  "用户研究",
  "交互设计",
  "作品集指导",
]);

// 标签页
const tabs = ref(["全部课程", "未完成", "已完成"]);

// 课程列表
const lessons = ref([
  {
    title: "第1课：UI设计基础入门",
    time: "08-12 14:00",
    duration: "45分钟",
    status: "已完成",
    icon: "play-circle",
  },
  {
    title: "第2课：设计工具Figma实战",
    time: "08-14 14:00",
    duration: "60分钟",
    status: "已完成",
    icon: "play-circle",
  },
  {
    title: "第3课：用户研究与需求分析",
    time: "08-16 14:00",
    duration: "55分钟",
    status: "已完成",
    icon: "play-circle",
  },
  {
    title: "第4课：信息架构与流程设计",
    time: "08-18 14:00",
    duration: "50分钟",
    status: "已完成",
    icon: "play-circle",
  },
  {
    title: "第5课：交互原型设计实战",
    time: "08-20 14:00",
    duration: "70分钟",
    status: "进行中",
    icon: "bullhorn",
  },
  {
    title: "第6课：设计评审与反馈处理",
    time: "08-22 14:00",
    duration: "45分钟",
    status: "未开始",
    icon: "lock",
  },
  {
    title: "第7课：设计系统构建",
    time: "08-24 14:00",
    duration: "65分钟",
    status: "未开始",
    icon: "lock",
  },
]);

// 定时器
let timeInterval: NodeJS.Timeout | null = null;

// 获取状态样式
const getStatusClass = (status: string) => {
  switch (status) {
    case "已完成":
      return "bg-green-500 text-white";
    case "进行中":
      return "bg-yellow-400 text-yellow-800 font-bold";
    case "未开始":
      return "bg-gray-200 text-gray-600";
    default:
      return "bg-gray-200 text-gray-600";
  }
};

// 更新当前时间
const updateTime = () => {
  const now = new Date();
  const hours = now.getHours().toString().padStart(2, "0");
  const minutes = now.getMinutes().toString().padStart(2, "0");
  currentTime.value = `${hours}:${minutes}`;
};

// 标签切换
const handleTabChange = (index: number) => {
  activeTab.value = index;
};

// 课程点击
const handleLessonClick = (lesson: any) => {
  Taro.showToast({
    title: `即将进入课程：${lesson.title}`,
    icon: "none",
  });
};

// 返回
const handleBack = () => {
  Taro.navigateBack();
};

// 分享
const handleShare = () => {
  Taro.showToast({
    title: "分享功能",
    icon: "none",
  });
};

// 收藏
const handleRefund = () => {
  Taro.showToast({
    title: "已申请退款",
    icon: "success",
  });
};

// 打开签到弹窗
const openSignModal = () => {
  showSignModal.value = true;
};

// 关闭签到弹窗
const closeSignModal = () => {
  showSignModal.value = false;
};

// 签到
const handleSignIn = () => {
  Taro.showToast({
    title: "签到成功！您已成功签到第5课",
    icon: "success",
  });

  // 更新课程状态
  const currentLesson = lessons.value.find(
    (lesson) => lesson.status === "进行中"
  );
  if (currentLesson) {
    currentLesson.status = "已完成";
  }

  closeSignModal();
};

// 生命周期
onMounted(() => {
  updateTime();
  timeInterval = setInterval(updateTime, 60000);
});

onUnmounted(() => {
  if (timeInterval) {
    clearInterval(timeInterval);
  }
});
</script>
